<script setup lang="ts">
import { reactive, ref, useTemplateRef } from 'vue';
import { isMobileTerminal } from '@/utils';
import { useRouterStore, useUserStore } from '@/store';
import { MConfirm, MMessage } from '@/libs';
import { updateUserProfile } from '@/api';
import ChangeAvatar from './components/ChangeAvatar';
import { useRouter } from 'vue-router';

const router = useRouter();
const userStore = useUserStore();
const routerStore = useRouterStore();
const inputFileRef = useTemplateRef<HTMLInputElement>('inputFileRef');

const userInfo = reactive({ ...userStore.userInfoGetter });

const onNavBarLeftClick = () => {
  routerStore.changeRouterType('back');
  router.back();
};

const onLogoutHandler = () => {
  MConfirm({
    title: '退出登录',
    content: '确认退出登录吗？',
    confirmText: '退出登录',
    cancelText: '取消'
  }).then(() => {
    userStore.logout();
  });
};

const onAvatarHandler = () => {
  inputFileRef.value?.click();
};
const onChangeAvatarHandler = () => {
  const [file]: FileList = inputFileRef.value?.files!;

  avatarBlob.value = URL.createObjectURL(file);

  dialogVisible.value = true;
};

const loading = ref<boolean>(false);
const onUpdateProfileHandler = async () => {
  loading.value = true;
  await updateUserProfile({
    nickname: userInfo.nickname,
    title: userInfo.title,
    company: userInfo.company,
    homePage: userInfo.homePage,
    introduction: userInfo.introduction,
    avatar: userInfo.avatar
  });

  userStore.updateUserInfo(userInfo);

  MMessage({
    content: '更新成功',
    type: 'success'
  });
  loading.value = false;
};

const dialogVisible = ref<boolean>(false);
const avatarBlob = ref<string>('');
</script>

<template>
  <div
    class="h-full overflow-auto bg-white duration-500 xl:pt-1 dark:bg-zinc-800"
  >
    <div
      class="relative mx-auto max-w-[1024px] bg-white duration-500 xl:rounded-sm xl:border xl:border-zinc-200 xl:px-4 xl:py-2 dark:bg-zinc-900 xl:dark:border-zinc-600"
    >
      <MNavBar
        v-if="isMobileTerminal"
        class="sticky"
        :clickLeft="onNavBarLeftClick"
      >
        个人资料
      </MNavBar>
      <div class="text-lg font-black xl:text-center dark:text-zinc-300">
        <div
          class="mt-2 h-full w-full px-1 pb-4 text-sm xl:w-2/3 xl:text-center"
        >
          <div class="py-1 xl:absolute xl:right-[16%] xl:text-center">
            <span
              class="mb-2 inline-block w-8 text-sm font-bold xl:mx-auto xl:block dark:text-zinc-300"
            >
              我的头像
            </span>
            <div
              class="group relative h-[80px] w-[80px] xl:left-[50%] xl:translate-x-[-50%] xl:cursor-pointer"
              @click="onAvatarHandler"
            >
              <img
                :src="userStore.userInfoGetter?.avatar"
                class="h-full w-full rounded-full xl:inline-block"
                alt=""
              />
              <div
                class="absolute top-0 hidden h-full w-full rounded-full bg-black/40 duration-200 xl:group-hover:block"
              >
                <MSvgIcon
                  name="change-header-image"
                  class="mx-auto mt-2 h-2 w-2"
                />
                <div
                  class="mt-0.5 scale-90 text-xs text-white dark:text-zinc-300"
                >
                  点击更换头像
                </div>
              </div>
            </div>
            <input
              v-show="false"
              ref="inputFileRef"
              type="file"
              accept=".png,.jpeg,.jpg,.gif"
              @change="onChangeAvatarHandler"
            />
            <p class="mt-1 text-xs text-zinc-500 xl:w-10 dark:text-zinc-400">
              支持 png/jpeg/jpg/gif 格式, 大小 5M 以内的图片
            </p>
          </div>
          <div class="py-1 xl:my-1 xl:flex xl:items-center">
            <span
              class="mb-1 block w-8 text-xs font-bold xl:mb-0 dark:text-zinc-300"
            >
              用户名
            </span>
            <MInput
              type="text"
              class="w-full"
              :max="20"
              v-model="userInfo.nickname"
            />
          </div>
          <div class="py-1 xl:my-1 xl:flex xl:items-center">
            <span
              class="mb-1 block w-8 text-xs font-bold xl:mb-0 dark:text-zinc-300"
            >
              职位
            </span>
            <MInput type="text" class="w-full" v-model="userInfo.company" />
          </div>
          <div class="py-1 xl:my-1 xl:flex xl:items-center">
            <span
              class="mb-1 block w-8 text-xs font-bold xl:mb-0 dark:text-zinc-300"
            >
              公司
            </span>
            <MInput type="text" class="w-full" v-model="userInfo.company" />
          </div>
          <div class="py-1 xl:my-1 xl:flex xl:items-center">
            <span
              class="mb-1 block w-8 text-xs font-bold xl:mb-0 dark:text-zinc-300"
            >
              个人主页
            </span>
            <MInput
              type="text"
              class="w-full"
              :max="20"
              v-model="userInfo.homePage"
            />
          </div>
          <div class="py-1 xl:my-1 xl:flex xl:items-center">
            <span
              class="mb-1 block w-8 text-xs font-bold xl:mb-0 dark:text-zinc-300"
            >
              个人介绍
            </span>
            <MInput
              type="textarea"
              class="w-full"
              :max="20"
              v-model="userInfo.introduction"
            />
          </div>
          <MButton
            class="xl: mt-2 mb-4 w-full xl:ml-[50%] xl:w-[160px] xl:translate-x-[-50%] dark:bg-zinc-800 dark:text-zinc-300"
            @click="onUpdateProfileHandler"
            :loading="loading"
          >
            保存修改
          </MButton>

          <MButton
            v-if="isMobileTerminal"
            class="w-full xl:ml-[50%] xl:w-[160px] xl:translate-x-[-50%] dark:bg-zinc-800 dark:text-zinc-300"
            @click="onLogoutHandler"
          >
            退出登录
          </MButton>
        </div>
      </div>
    </div>
    <MDialog v-if="!isMobileTerminal" title="裁剪头像" v-model="dialogVisible">
      <ChangeAvatar
        :blob="avatarBlob"
        @close="
          () => {
            dialogVisible = false;
            inputFileRef!.value = '';
          }
        "
      />
    </MDialog>
    <MPopup
      v-else
      v-model="dialogVisible"
      :class="{ 'h-screen': dialogVisible }"
    >
      <ChangeAvatar
        :blob="avatarBlob"
        @close="
          () => {
            dialogVisible = false;
            inputFileRef!.value = '';
          }
        "
      />
    </MPopup>
  </div>
</template>
